<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getList(1)"
      @clear="clear"
    />
    <div class="mb20">
      <el-button type="primary" @click="handleEdit()">新增任务</el-button>
    </div>
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table"
    >
      <el-table-column
        align="center"
        label="任务ID"
        prop="id"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="任务名称"
        prop="jobName"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="任务class"
        prop="beanClass"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        label="cron表达式"
        prop="cronExpression"
        min-width="120"
        show-overflow-tooltip
      />
      <el-table-column
        align="center"
        fixed="right"
        label="商户任务"
        min-width="80"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <span v-if="scope.row.isShop == '1'">是</span>
          <span v-if="scope.row.isShop == '0'">否</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="状态"
        min-width="80"
        show-overflow-tooltip
      >
        <template v-slot="scope">
          <el-switch
            v-model="scope.row.jobStatus"
            active-value="1"
            inactive-value="0"
            @change="(e) => changeSta(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        min-width="120"
      >
        <template slot-scope="scope">
          <div class="flex-cc">
            <el-button type="text" @click="handleDetail(scope.row)"
              >执行记录</el-button
            >
            <el-button
              v-if="scope.row.jobStatus == '0'"
              type="text"
              @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              v-if="scope.row.jobStatus == '0'"
              type="text"
              class="red"
              @click="handleDel(scope.row)"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Paginations
      :total="totalCount"
      :page="pagination.page"
      @current-change="getList"
      @SizeChange="handleSizeChange"
    />

    <el-dialog
      :title="param.id ? '编辑任务' : '新增任务'"
      :visible.sync="isShowModel"
      :before-close="handleClose"
      width="600px"
    >
      <el-form
        ref="form"
        :model="param"
        :rules="rules"
        label-suffix="："
        label-width="140px"
      >
        <el-form-item label="任务名称" prop="jobName">
          <el-input v-model="param.jobName" placeholder="请输入任务名称" />
        </el-form-item>
        <el-form-item label="任务class" prop="beanClass">
          <el-input v-model="param.beanClass" placeholder="请输入任务class" />
        </el-form-item>
        <el-form-item label="cron表达式" prop="cronExpression">
          <el-input
            v-model="param.cronExpression"
            placeholder="请输入cron表达式"
          />
        </el-form-item>
        <el-form-item label="任务类型" prop="jobGroup">
          <el-select v-model="param.jobGroup">
            <el-option label="普通任务" value="0" />
            <el-option label="sql任务" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="param.jobGroup == '2'" label="sql" prop="sql">
          <el-input v-model="param.sql" placeholder="请输入sql" />
        </el-form-item>
        <el-form-item label="是否遍历商户" prop="isShop">
          <el-select v-model="param.isShop">
            <el-option label="否" value="0" />
            <el-option label="是" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="超时时长" prop="timeOut">
          <el-input
            v-model="param.timeOut"
            style="width: 360px"
            placeholder="请输入超时时长(秒)"
          />
          <span class="ml10">秒</span>
        </el-form-item>
        <!-- <el-form-item label="状态" prop="jobStatus">
          <el-switch
            v-model="param.jobStatus"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button :loading="subLoading" type="primary" @click="onSubmit"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog title="执行记录" :visible.sync="isShowRecord" width="1000px">
      <el-table
        :data="recordList"
        border
        fit
        :header-row-class-name="'table-header'"
        class="doumee-element-table"
      >
        <el-table-column
          align="center"
          label="执行时间"
          prop="editDate"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="商户编号"
          prop="shopId"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="生成时间"
          prop="createDate"
          min-width="160"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="执行服务器"
          prop="serverName"
          min-width="100"
          show-overflow-tooltip
        />
        <el-table-column
          align="center"
          label="灰度执行"
          prop=""
          min-width="100"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            <span v-if="scope.row.versionType == '0'">生产</span>
            <span v-if="scope.row.versionType == '1'">灰度</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="执行结果"
          prop="editDate"
          min-width="100"
          show-overflow-tooltip
        >
          <template v-slot="scope">
            <span v-if="scope.row.status == '0'">失败</span>
            <span v-if="scope.row.status == '1'">成功</span>
            <span v-if="scope.row.status == '2'">未执行</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="失败原因"
          prop="exception"
          min-width="130"
          show-overflow-tooltip
        />
      </el-table>
      <Paginations
        :total="recordTotal"
        :page="recordPagination.page"
        @current-change="getRecordList"
        @SizeChange="handleRecordSizeChange"
      />
    </el-dialog>
  </div>
</template>

<script>
import {
  timedTaskList,
  timedTaskAdd,
  timedTaskEdit,
  timedTaskDetail,
  timedTaskUpdate,
  timedTaskDel,
  timedTaskRecord
} from '@/api'
export default {
  data() {
    return {
      filters: {},
      pagination: {
        page: 1,
        rows: 10
      },
      queryFormConfig: {
        formItems: [
          {
            filed: 'keyword',
            type: 'input',
            label: '任务名称'
          }
        ],
        online: true
      },
      meta: [],
      list: [],
      activeTaskId: '',
      recordList: [],
      recordTotal: 0,
      recordPagination: {
        page: 1,
        rows: 10
      },

      isShowRecord: false,
      totalCount: 10,

      isShowModel: false,
      param: {
        jobStatus: '0'
      },
      subLoading: false,
      rules: {
        jobGroup: [{ required: true, message: '请选择', trigger: 'change' }],
        isShop: [{ required: true, message: '请选择', trigger: 'change' }],
        beanClass: [{ required: true, message: '请输入', trigger: 'blur' }],
        sql: [{ required: true, message: '请输入', trigger: 'blur' }],
        cronExpression: [{ required: true, message: '请输入', trigger: 'blur' }],
        jobName: [{ required: true, message: '请输入', trigger: 'blur' }],
        // proxyUrl: [{ required: true, message: '请输入', trigger: 'blur' }],
        jobStatus: [{ required: true, message: '请选择', trigger: 'change' }]
      }
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getList(1)
  },
  activated() {

  },
  methods: {
    onSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const { param } = this
          this.subLoading = true
          const fn = param.id ? timedTaskEdit : timedTaskAdd
          fn({ param }).then(res => {
            this.subLoading = false
            this.isShowModel = false
            this.$message.success('任务保存成功')
            this.getList()
          }, () => {
            this.subLoading = false
          })
        }
      })
    },
    getList(page) {
      const { pagination, filters } = this
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      timedTaskList({
        pagination,
        param: { ...filters }
      })
        .then((res) => {
          if (res.errorCode === '000000') {
            this.list = res.recordList
            this.totalCount = res.totalCount
          }
        })
    },
    handleDetail(row) {
      this.activeTaskId = row.id
      this.recordPagination = {
        page: 1,
        rows: 10
      }
      timedTaskRecord({ param: { taskId: row.id }, pagination: this.recordPagination }).then(res => {
        this.recordList = res.recordList
        this.recordTotal = res.totalCount
        this.isShowRecord = true
      })
    },
    getRecordList(page) {
      if (page) {
        this.recordPagination.page = page
      }
      const { recordPagination } = this
      timedTaskRecord({ param: { taskId: this.activeTaskId }, pagination: recordPagination }).then(res => {
        this.recordList = res.recordList
        this.recordTotal = res.totalCount
      })
    },
    handleRecordSizeChange(value) {
      this.recordPagination.rows = value
      this.getRecordList()
    },
    handleEdit(row) {
      if (row && row.id) {
        timedTaskDetail({ param: { id: row.id } }).then(res => {
          this.param = { ...res.record }
        })
      } else {
        this.param = {
          jobStatus: '0'
        }
      }

      this.isShowModel = true
    },
    changeSta(row) {
      timedTaskUpdate({
        param: {
          id: row.id,
          jobStatus: row.jobStatus
        }
      }).then(res => {
        this.$message.success('状态更新成功')
        this.getList()
      }, () => {
        this.getList()
      })
    },
    handleDel(row) {
      this.$confirm('此时将删除次任务，是非继续此操作？', '确定要离开?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        timedTaskDel({ param: { id: row.id } }).then(res => {
          this.getList()
          this.$message.success('删除成功')
        })
      })
    },
    handleClose() {
      this.isShowModel = false
    },
    clear() {
      this.filters = {}
      this.getList(1)
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    }
  }
}
</script>

<style>
</style>
